<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>React实例</title>
		<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
		<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
		<!-- 引入时间库 -->
		<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
		<!-- 引入antd的cdn库 -->
		<script src="https://lib.baomitu.com/antd/4.24.12/antd.js"></script>
		<!-- 引入antd的样式 -->
		<link rel="stylesheet" href="https://lib.baomitu.com/antd/4.24.12/antd.css">
		<!-- 引入工具库 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/utils"></script>
		<script src="//cdn.jsdelivr.net/npm/@jiess/utils/lib/JiessMidder.js"></script>
		<script src="//cdn.jsdelivr.net/npm/@jiess/http/lib/JiessLoading.js"></script>
		<script src="//cdn.jsdelivr.net/npm/@jiess/http"></script>
		<!-- 导入plus核心库 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus"></script>
		<!-- 导入环境适配代码 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus/lib/envReact.js"></script>
		<!-- 导入基础样式 -->
		<link rel="stylesheet" href="../jiess-base/react168antd/css/base.css">
	</head>
	<body>
		<div id="root" />
		<script>
			// 这里为了方便示例，定义全局变量
			var env = 'react-antd';
		</script>
		<script type="module">
			import {
				$Area,
				$Between,
				$modules,
				$tanInstance,
				$dialogInstance,
				// --------------------
				$SuperTable,
				$TableFilter,
				$ActionButton,
				$ActionButtons,
				$JiessDialog,
				$TableTools,
				$JiessTable,
				// --------------------
				$Input,
				$Select,
				$InputNumber,
				$Cascader,
				$Search,
				$Password,
				$Autocomplete,
				$TextArea
			} from '../jiess-base/react168antd/cdn/index.js';
			import { _SuperTable, _ruleConfig } from '../jiess-base/config.js';
			// 获取列表基础配置，并挂载到window上
			window.SuperTableCnf = _SuperTable;
			window.ruleConfig = _ruleConfig;
			window.$modules = $modules;
			window.$Input = $Input;
			window.$Select = $Select;
			window.$InputNumber = $InputNumber;
			window.$Cascader = $Cascader;
			window.$Search = $Search;
			window.$Password = $Password;
			window.$Autocomplete = $Autocomplete;
			window.$TextArea = $TextArea;
			// ==============================================================
			const modulePath = location.search.replace('?path=', '');
			const { $entry, $component } = $modules;
			const jiess = $entry(JiessEnv, React, {
				area: $Area,
				$tan: $tanInstance,
				dialog: $dialogInstance,
				// 注入全局的消息提示
				$msg: (msg, type = 'success') => antd.message[type](msg),
			});
			$component('$Between', $Between);
			$component('$ActionButton', $ActionButton);
			$component('$ActionButtons', $ActionButtons);
			// 异步导setup配置后，再启用渲染
			import(`./${modulePath}/config/index.js`).then(dd => {
				const container = document.getElementById('root');
				const root = ReactDOM.createRoot(container);
				root.render(React.createElement(jiess.JiessComponent, {
					setup() {
						this.add(this.render({ is: $JiessDialog }));
						dd.default.call(this, {
							$SuperTable,
							$TableFilter,
							$TableTools,
							$JiessTable,
							Button: antd.Button
						})
					}
				}));
			});
		</script>
	</body>
</html>